<!-- 文件: pages/njt/register.vue -->
<template>
  <view class="register-container">
    <image class="logo" src="/static/njt.png"></image>
    <u--form ref="uForm" :model="model" :rules="rules" class="register-form" labelPosition="left">
      <!-- 公司名称输入项 -->
      <u-form-item label="公司名称" labelWidth="auto" prop="companyName">
        <u--input
            v-model="model.companyName"
            :clearable="true"
            border="surround"
            placeholder="请输入公司名称"
            type="text"
        ></u--input>
      </u-form-item>

      <!-- 手机号码输入项 -->
      <u-form-item label="手机号码" labelWidth="auto" prop="mobilePhone">
        <u--input
            v-model="model.mobilePhone"
            :clearable="true"
            border="surround"
            placeholder="请输入手机号码"
            type="number"
        ></u--input>
      </u-form-item>

      <!-- 密码输入项 -->
      <u-form-item label="输入密码" labelWidth="auto" prop="password">
        <u--input
            v-model="model.password"
            :clearable="true"
            :show-password="showPassword"
            border="surround"
            placeholder="请输入密码"
            type="password"
            @click-icon="showPassword = !showPassword"
        ></u--input>
      </u-form-item>

      <!-- 确认密码输入项 -->
      <u-form-item label="确认密码" labelWidth="auto" prop="confirmPassword">
        <u--input
            v-model="model.confirmPassword"
            :clearable="true"
            :show-password="showConfirmPassword"
            border="surround"
            placeholder="请再次输入密码"
            type="password"
            @click-icon="showConfirmPassword = !showConfirmPassword"
        ></u--input>
      </u-form-item>

      <!-- 按钮组 -->
      <u-form-item>
        <u-button
            class="confirm-btn"
            text="确认注册"
            type="success"
            @click="submitForm"
        ></u-button>
        <u-button
            class="reset-btn"
            text="重置"
            type="error"
            @click="resetForm"
        ></u-button>
      </u-form-item>
    </u--form>
  </view>
</template>

<script>
export default {
  data() {
    // 自定义密码验证函数，检查两次输入的密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.model.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };

    return {
      // 表单数据模型
      model: {
        companyName: '',
        mobilePhone: '',
        password: '',
        confirmPassword: ''
      },
      // 表单验证规则
      rules: {
        companyName: [
          {required: true, message: '请输入公司名称', trigger: ['blur', 'change']},
          {min: 2, max: 50, message: '公司名称长度在2-50个字符之间', trigger: ['blur', 'change']}
        ],
        mobilePhone: [
          {required: true, message: '请输入手机号码', trigger: ['blur', 'change']},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: ['blur', 'change']}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur', 'change']},
          {min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: ['blur', 'change']}
        ],
        confirmPassword: [
          {required: true, message: '请确认密码', trigger: ['blur', 'change']},
          {validator: validateConfirmPassword, trigger: ['blur', 'change']}
        ]
      },
      // 密码显示状态
      showPassword: false,
      showConfirmPassword: false,
      // 后端API基础地址
      baseUrl: 'http://localhost:8080'
    }
  },
  methods: {
    // 提交注册表单
    async submitForm() {
      this.$refs.uForm.validate().then(async (isValid) => {
        if (isValid) {
          try {
            uni.showLoading({
              title: '注册中...',
              mask: true
            });

            // 调用后端注册接口
            uni.request({
              url: `${this.baseUrl}/api/register`,
              method: 'POST',
              data: {
                companyName: this.model.companyName,
                mobilePhone: this.model.mobilePhone,
                password: this.model.password
              },
              header: {
                'Content-Type': 'application/json'
              },
              success: (res) => {
                uni.hideLoading();

                if (res.statusCode === 200) {
                  const result = res.data;
                  if (result.code === 200) {
                    uni.$u.toast('注册成功');

                    // 注册成功后返回登录页
                    setTimeout(() => {
                      uni.navigateBack({delta: 1});
                    }, 1500);
                  } else {
                    uni.$u.toast(result.msg || '注册失败，请检查信息');
                  }
                } else {
                  uni.$u.toast('网络错误，无法连接服务器');
                }
              },
              fail: (err) => {
                uni.hideLoading();
                console.error('注册异常：', err);
                uni.$u.toast('系统异常，请稍后再试');
              }
            });
          } catch (error) {
            uni.hideLoading();
            console.error('注册异常：', error);
            uni.$u.toast('系统异常，请稍后再试');
          }
        }
      }).catch((validateErr) => {
        console.log('表单验证失败：', validateErr);
      });
    },

    // 重置表单
    resetForm() {
      // 重置表单数据
      this.model = {
        companyName: '',
        mobilePhone: '',
        password: '',
        confirmPassword: ''
      };

      // 重置表单验证状态
      if (this.$refs.uForm) {
        this.$refs.uForm.resetFields();
      }

      // 重置密码显示状态
      this.showPassword = false;
      this.showConfirmPassword = false;

      // 显示重置成功提示
      uni.$u.toast('注册信息已重置');
    }
  }
}
</script>

<style scoped>
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 100rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20rpx;
}

.register-container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.register-form {
  width: 100%;
  max-width: 500rpx;
  background-color: #ffffff;
  padding: 50rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  margin-top: 50rpx;
}

.confirm-btn, .reset-btn {
  width: 45%;
  margin: 0 2.5%;
}
</style>
